<!-- build time:Tue May 05 2020 18:34:22 GMT+0800 (GMT+08:00) --><!DOCTYPE html><html lang="zh"><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta name="referrer" content="never"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"><meta name="renderer" content="webkit"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no,email=no,adress=no"><meta name="theme-color" content="#000000"><meta http-equiv="window-target" content="_top"><title>大前端工具集——收藏 | Elon Chung - JAVA PHP Web Developer Blog</title><meta name="description" content="主要内容是一些使用过的库、工具、套路或关注的前端组织等等，反正用 **前端瑞士军刀** 来总结这篇文章再合适不过鸟。"><meta name="keywords" content="前端,Web,大前端工具,前端博客,css,js"><meta property="og:type" content="article"><meta property="og:title" content="大前端工具集——收藏"><meta property="og:url" content="https://www.elonchung.cn/2017/06/front-tool/index.html"><meta property="og:site_name" content="Elon Chung - JAVA PHP Web Developer Blog"><meta property="og:description" content="主要内容是一些使用过的库、工具、套路或关注的前端组织等等，反正用 **前端瑞士军刀** 来总结这篇文章再合适不过鸟。"><meta property="og:locale" content="zh-CN"><meta property="og:updated_time" content="2018-05-05T04:35:48.186Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="大前端工具集——收藏"><meta name="twitter:description" content="主要内容是一些使用过的库、工具、套路或关注的前端组织等等，反正用 **前端瑞士军刀** 来总结这篇文章再合适不过鸟。"><link rel="canonical" href="https://www.elonchung.cn/2017/06/front-tool/index.html"><link rel="alternate" href="/atom.xml" title="Elon Chung - JAVA PHP Web Developer Blog" type="application/atom+xml"><link rel="icon" href="/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"></head><body class="main-center" itemscope itemtype="http://schema.org/WebPage"><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="slimContent"><div class="navbar-header"><div class="profile-block text-center"><a id="avatar" href="https://github.com/zhongweixiang?tab=repositories" target="_blank"><img class="img-circle img-rotate" src="/images/avatar.png" width="200" height="200" alt="avatar"></a><h2 id="name" class="hidden-xs hidden-sm">Elon Chung</h2><h3 id="title" class="hidden-xs hidden-sm hidden-md">JAVA PHP Web Developer</h3><small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Shenzhen, China</small></div><div class="search" id="search-form-wrap"><form class="search-form sidebar-form"><div class="input-group"><input type="text" class="search-form-input form-control" placeholder="搜索"> <span class="input-group-btn"><button type="submit" class="search-form-submit btn btn-flat" onclick="return!1"><i class="icon icon-search"></i></button></span></div></form><div class="ins-search"><div class="ins-search-mask"></div><div class="ins-search-container"><div class="ins-input-wrapper"><input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech> <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="ins-section-wrapper"><div class="ins-section-container"></div></div></div></div></div><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button></div><nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation"><ul class="nav navbar-nav main-nav"><li class="menu-item menu-item-home"><a href="/."><i class="icon icon-home-fill"></i> <span class="menu-title">首页</span></a></li><li class="menu-item menu-item-archives"><a href="/archives"><i class="icon icon-archives-fill"></i> <span class="menu-title">归档</span></a></li><li class="menu-item menu-item-categories"><a href="/categories"><i class="icon icon-folder"></i> <span class="menu-title">分类</span></a></li><li class="menu-item menu-item-tags"><a href="/tags"><i class="icon icon-tags"></i> <span class="menu-title">标签</span></a></li><li class="menu-item menu-item-repository"><a href="/repository"><i class="icon icon-project"></i> <span class="menu-title">项目</span></a></li><li class="menu-item menu-item-links"><a href="/links"><i class="icon icon-friendship"></i> <span class="menu-title">友链</span></a></li><li class="menu-item menu-item-about"><a href="/about"><i class="icon icon-cup-fill"></i> <span class="menu-title">关于</span></a></li></ul><ul class="social-links"><li><a href="https://github.com/zhongweixiang?tab=repositories" target="_blank" title="Github" data-toggle="tooltip" data-placement="top"><i class="icon icon-github"></i></a></li><li><a href="https://weibo.com/331845158" target="_blank" title="Weibo" data-toggle="tooltip" data-placement="top"><i class="icon icon-weibo"></i></a></li></ul></nav></div></header><aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar"><div class="slimContent"><div class="widget"><h3 class="widget-title">公告</h3><div class="widget-body"><div id="board"><div class="content"><p>欢迎交流与分享经验!</p></div></div></div></div><div class="widget"><h3 class="widget-title">分类</h3><div class="widget-body"><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTTP/">HTTP</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/LAMP/">LAMP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/MySQL/">MySQL</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/PHP/">PHP</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Python/">Python</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/tools/">tools</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/优化/">优化</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/前端/">前端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/学习资料/">学习资料</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/小公举/">小公举</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/成长鸡汤/">成长鸡汤</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库/">数据库</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/面试/">面试</a><span class="category-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">标签</h3><div class="widget-body"><ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTTP/">HTTP</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/LAMP/">LAMP</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Markdown/">Markdown</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/MySQL/">MySQL</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/PHP/">PHP</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/PHP框架/">PHP框架</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Python/">Python</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/RabbitMQ/">RabbitMQ</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Swoole/">Swoole</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/">hexo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/phpstorm/">phpstorm</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seo/">seo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/tools/">tools</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/前端/">前端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/小公举/">小公举</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据库/">数据库</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/爬虫/">爬虫</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/资料/">资料</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试/">面试</a><span class="tag-list-count">1</span></li></ul></div></div><div class="widget"><h3 class="widget-title">标签云</h3><div class="widget-body tagcloud"><a href="/tags/Git/" style="font-size:13.33px">Git</a> <a href="/tags/HTTP/" style="font-size:13.33px">HTTP</a> <a href="/tags/LAMP/" style="font-size:13px">LAMP</a> <a href="/tags/Markdown/" style="font-size:13px">Markdown</a> <a href="/tags/MySQL/" style="font-size:13px">MySQL</a> <a href="/tags/PHP/" style="font-size:14px">PHP</a> <a href="/tags/PHP框架/" style="font-size:13px">PHP框架</a> <a href="/tags/Python/" style="font-size:13px">Python</a> <a href="/tags/RabbitMQ/" style="font-size:13px">RabbitMQ</a> <a href="/tags/Swoole/" style="font-size:13px">Swoole</a> <a href="/tags/git/" style="font-size:13px">git</a> <a href="/tags/hexo/" style="font-size:13px">hexo</a> <a href="/tags/phpstorm/" style="font-size:13px">phpstorm</a> <a href="/tags/seo/" style="font-size:13px">seo</a> <a href="/tags/tools/" style="font-size:13px">tools</a> <a href="/tags/前端/" style="font-size:13px">前端</a> <a href="/tags/小公举/" style="font-size:13.67px">小公举</a> <a href="/tags/数据库/" style="font-size:13.33px">数据库</a> <a href="/tags/爬虫/" style="font-size:13px">爬虫</a> <a href="/tags/资料/" style="font-size:13px">资料</a> <a href="/tags/面试/" style="font-size:13px">面试</a></div></div><div class="widget"><h3 class="widget-title">归档</h3><div class="widget-body"><ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">五月 2020</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">四月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/11/">十一月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/06/">六月 2018</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/05/">五月 2018</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/04/">四月 2018</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/10/">十月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/07/">七月 2017</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/06/">六月 2017</a><span class="archive-list-count">7</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">三月 2017</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/08/">八月 2016</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/03/">三月 2016</a><span class="archive-list-count">2</span></li></ul></div></div><div class="widget"><h3 class="widget-title">最新文章</h3><div class="widget-body"><ul class="recent-post-list list-unstyled no-thumbnail"><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/05/logbak/" class="title">logback.xml</a></p><p class="item-date"><time datetime="2020-05-05T09:27:02.466Z" itemprop="datePublished">20-05-05</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/04/queue/" class="title">消息对列案例 -- 事务的二段提交</a></p><p class="item-date"><time datetime="2020-04-23T08:23:58.531Z" itemprop="datePublished">20-04-23</time></p></div></li><li><div class="item-inner"><p class="item-category"></p><p class="item-title"><a href="/2020/04/maven-pom/" class="title">Maven -- pom.xml</a></p><p class="item-date"><time datetime="2020-04-23T01:51:34.684Z" itemprop="datePublished">20-04-23</time></p></div></li><li><div class="item-inner"><p class="item-category"><a class="category-link" href="/categories/面试/">面试</a></p><p class="item-title"><a href="/2018/11/mianshiti/" class="title">面试题库</a></p><p class="item-date"><time datetime="2018-11-15T05:21:52.000Z" itemprop="datePublished">18-11-15</time></p></div></li><li><div class="item-inner"><p class="item-category"><a class="category-link" href="/categories/PHP/">PHP</a></p><p class="item-title"><a href="/2018/06/improve/" class="title">PHP架构师之路-提高阶段</a></p><p class="item-date"><time datetime="2018-06-02T05:21:52.000Z" itemprop="datePublished">18-06-02</time></p></div></li></ul></div></div></div></aside><aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar"><div class="slimContent"><nav id="toc" class="article-toc"><h3 class="toc-title">文章目录</h3><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#大前端工具集"><span class="toc-number">1.</span> <span class="toc-text">大前端工具集</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#undefined"><span class="toc-number">1.0.0.1.</span> <span class="toc-text"></span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#前端组织-前端博客"><span class="toc-number">1.0.1.</span> <span class="toc-text">前端组织/前端博客</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#博客搭建"><span class="toc-number">1.0.2.</span> <span class="toc-text">博客搭建</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTML-CSS"><span class="toc-number">1.0.3.</span> <span class="toc-text">HTML/CSS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#浏览端-JS"><span class="toc-number">1.0.4.</span> <span class="toc-text">浏览端 JS</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Project-Build"><span class="toc-number">1.0.5.</span> <span class="toc-text">Project Build</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Node-Package"><span class="toc-number">1.0.6.</span> <span class="toc-text">Node Package</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#这里介绍些有特色且前端有必要知道的包"><span class="toc-number">1.0.6.0.1.</span> <span class="toc-text">这里介绍些有特色且前端有必要知道的包</span></a></li></ol></li></ol><li class="toc-item toc-level-3"><a class="toc-link" href="#Node-Project"><span class="toc-number">1.0.7.</span> <span class="toc-text">Node Project</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#精选阅读"><span class="toc-number">1.1.</span> <span class="toc-text">精选阅读</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#前端技术"><span class="toc-number">1.1.1.</span> <span class="toc-text">前端技术</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Node-学习资料"><span class="toc-number">1.1.2.</span> <span class="toc-text">Node 学习资料</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#前端面试"><span class="toc-number">1.1.3.</span> <span class="toc-text">前端面试</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#其他技术"><span class="toc-number">1.1.4.</span> <span class="toc-text">其他技术</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#工具-软件"><span class="toc-number">1.2.</span> <span class="toc-text">工具/软件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Web"><span class="toc-number">1.2.1.</span> <span class="toc-text">Web</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#APP"><span class="toc-number">1.2.2.</span> <span class="toc-text">APP</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Mac"><span class="toc-number">1.2.3.</span> <span class="toc-text">Mac</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Linux"><span class="toc-number">1.2.4.</span> <span class="toc-text">Linux</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Chrome-浏览器插件"><span class="toc-number">1.2.5.</span> <span class="toc-text">Chrome 浏览器插件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Git"><span class="toc-number">1.2.6.</span> <span class="toc-text">Git</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数据端"><span class="toc-number">1.2.7.</span> <span class="toc-text">数据端</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#设计-交互"><span class="toc-number">1.2.8.</span> <span class="toc-text">设计/交互</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#速查手册"><span class="toc-number">1.2.9.</span> <span class="toc-text">速查手册</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#前端炫技-炫酷狂拽叼炸天站点"><span class="toc-number">1.2.10.</span> <span class="toc-text">前端炫技-炫酷狂拽叼炸天站点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#小结"><span class="toc-number">1.2.11.</span> <span class="toc-text">小结</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#背景"><span class="toc-number">1.2.11.0.1.</span> <span class="toc-text">背景</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#说说目标"><span class="toc-number">1.2.11.0.2.</span> <span class="toc-text">说说目标</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#TODO"><span class="toc-number">1.2.12.</span> <span class="toc-text">TODO</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#【转载】-原文地址：http-www-fefork-com-fetool"><span class="toc-number">2.</span> <span class="toc-text">【转载】 原文地址：http://www.fefork.com/fetool/</span></a></li></nav></div></aside><main class="main" role="main"><div class="content"><article id="post-front-tool" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting"><div class="article-header"><h1 class="article-title" itemprop="name">大前端工具集——收藏</h1><div class="article-meta"><span class="article-date"><i class="icon icon-calendar-check"></i> <a href="/2017/06/front-tool/" class="article-date"><time datetime="2017-06-27T17:16:28.000Z" itemprop="datePublished">17-06-28</time></a></span> <span class="article-category"><i class="icon icon-folder"></i> <a class="article-category-link" href="/categories/前端/">前端</a></span> <span class="article-tag"><i class="icon icon-tags"></i> <a class="article-tag-link" href="/tags/前端/">前端</a>, <a class="article-tag-link" href="/tags/小公举/">小公举</a></span> <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2017/06/front-tool/#comments" class="article-comment-link">评论</a></span> <span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 6,669(字)</span> <span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 24(分)</span></div></div><div class="article-entry markdown-body" itemprop="articleBody"><h1 id="大前端工具集"><a href="#大前端工具集" class="headerlink" title="大前端工具集"></a><a href="#%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7%E9%9B%86"><span aria-hidden="true" class="octicon octicon-link"></span></a>大前端工具集</h1><blockquote><p>本篇文章记录了一枚程序猿的百宝箱。PS：每个分类的都按照推荐的先后排列。</p><p>主要内容是一些使用过的库、工具、套路或关注的前端组织等等，反正用 <strong>前端瑞士军刀</strong> 来总结这篇文章再合适不过鸟。</p></blockquote><h4><a href="#" class="headerlink"></a><a href="#%E6%82%A8%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E4%BB%A5%E4%B8%8B%E6%96%B9%E5%BC%8F%E8%81%94%E7%B3%BB%E5%88%B0%E6%88%91"><span aria-hidden="true" class="octicon octicon-link"></span></a></h4><hr><h3 id="前端组织-前端博客"><a href="#前端组织-前端博客" class="headerlink" title="前端组织/前端博客"></a><a href="#%E5%89%8D%E7%AB%AF%E7%BB%84%E7%BB%87%E5%89%8D%E7%AB%AF%E5%8D%9A%E5%AE%A2"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端组织/前端博客</h3><blockquote><p>虽混过外企俩家，但劳资英文这项的技能点还是灰色的…so，俺关注的站点主要以中文为主</p></blockquote><ul><li><a href="https://github.com" target="_blank" rel="noopener">GitHub</a> - 没 <code>Git</code> 都不好意思面基有木有！！！</li><li><a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener">MDN</a> - 无数的资源再等着你探索，追标准和新特性肯定得关注的网站</li><li><a href="https://www.awesomes.cn/" target="_blank" rel="noopener">Awesomes.cn</a> - 国人维护的前端资源库，深度对接到 <code>Github</code>，分类和展现清晰，值得收藏</li><li><a href="https://uptodate.frontendrescue.org/zh/" target="_blank" rel="noopener">如何跟上前端开发的最新前沿</a> - RT，不解释</li><li><a href="http://www.imooc.com/" target="_blank" rel="noopener">慕课</a> - 大量的在线计算机课程。 虽然初、中级居多，但是不乏有巨作值得细细品尝</li><li><a href="http://javascript.ruanyifeng.com/" target="_blank" rel="noopener">阮一峰</a> - 关注多年，拜读其 <a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">ES6</a> 系列。虽网传靠写书进鸟阿里，但博客内容确实够丰富</li><li><a href="http://www.w3cplus.com/" target="_blank" rel="noopener">W3Cplus</a> - 大漠(《图解 CSS3》作者)在国内的影响力杠杠的，<code>Sass</code> 专家级</li><li><a href="http://taobaofed.org/" target="_blank" rel="noopener">淘宝前端团队</a> - 内容涵盖 <code>Web</code> 和 <code>Node</code>，要深度游深度，要广度有广度</li><li><a href="http://www.75team.com/" target="_blank" rel="noopener">奇舞团博客</a> - 坚持是最宝贵的，别人的奇舞周刊早已经过百期了</li><li><p><a href="http://fex.baidu.com/" target="_blank" rel="noopener">百度 FEX</a> - 代表作 <code>FIS</code>、<code>UEditor</code>、<code>WebUploader</code>、<code>KityMinder</code></p></li><li><p><a href="http://www.alloyteam.com/" target="_blank" rel="noopener">腾讯全端 AlloyTeam</a> - 腾讯 Web 前端团队，博客真的有点丑…</p></li><li><a href="http://blog.fens.me/" target="_blank" rel="noopener">粉丝日志 for 张丹</a> - 大爱作者写的 <code>Node</code> 系列</li><li><a href="http://www.zhangxinxu.com/wordpress/" target="_blank" rel="noopener">张鑫旭</a> - 成名多年的、高产的前端大湿，<code>CSS</code>猛人</li></ul><h3 id="博客搭建"><a href="#博客搭建" class="headerlink" title="博客搭建"></a><a href="#%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA"><span aria-hidden="true" class="octicon octicon-link"></span></a>博客搭建</h3><ul><li><a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">hexo</a> - 快速、简洁且高效的博客框架</li><li><a href="http://jekyll.bootcss.com/" target="_blank" rel="noopener">jekyll</a> - 将纯文本转化为静态网站和博客</li><li><a href="https://pages.github.com/" target="_blank" rel="noopener">GithubPages</a> - 免费的静态站点。配合着 <code>hexo</code> 或 <code>jekyll</code> 的模板，分分搭建出一套炫酷的个人博客</li><li><a href="https://www.tumblr.com/" target="_blank" rel="noopener">Tumblr</a> - 轻博客的祖师爷，各种各样的主题感觉不错</li><li><a href="https://zh-cn.wordpress.com/" target="_blank" rel="noopener">Wordpress</a> - 这玩意古老到都不想介绍</li></ul><blockquote><p>使用 <code>hexo/jekyll + GitPage</code>，前端搭建静态博客那是相当 easy。用 <code>Markdown</code> 写文章做记录，再 <code>push</code> 到 <code>Git</code> 上，分分钟高大上有木有</p></blockquote><h3 id="HTML-CSS"><a href="#HTML-CSS" class="headerlink" title="HTML/CSS"></a><a href="#htmlcss"><span aria-hidden="true" class="octicon octicon-link"></span></a>HTML/CSS</h3><ul><li><a href="https://github.com/joshbuchea/HEAD" target="_blank" rel="noopener">HEAD</a> - 最全的 <code>&amp;lt;head&amp;gt;</code> 列表，真心佩服这种偏执的整理能力</li><li><a href="http://metroui.org.ua/" target="_blank" rel="noopener">MetroUI</a> - 好看好用，重点是样式特别、个性</li><li><a href="https://connoratherton.com/loaders" target="_blank" rel="noopener">LoadersCSS</a> - 用 CSS 技术实现 loading 动画； 补一句，想熟悉、理解 <code>keyframes、animation、transform、transition</code> 的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)</li><li><a href="https://github.com/weui/weui" target="_blank" rel="noopener">WeUI</a> - 一套同微信原生视觉体验一致的基础样式库 为微信 Web 开发量身设计，令用户的使用感知更加统一</li><li><a href="https://github.com/postcss/postcss" target="_blank" rel="noopener">PostCSS</a> - 最近才知道大名鼎鼎<a href="https://github.com/postcss/autoprefixer" target="_blank" rel="noopener">Autoprefixer</a>是其插件 推荐大漠的文章<a href="http://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html" target="_blank" rel="noopener">《PostCSS深入学习》</a>，有关 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等问题，文章里面有答案</li><li><p><a href="https://github.com/una/CSSgram" target="_blank" rel="noopener">CSSgram</a> - 图片滤镜库，终于可以用 CSS 在 web 上实现滤镜的效果鸟 IE不支持，不过新的移动设备支持没问题 <a href="http://caniuse.com/#search=CSS%20Blend%20Modes" target="_blank" rel="noopener">Can I Use</a></p></li><li><p><a href="https://github.com/chinchang/hint.css" target="_blank" rel="noopener">HINT.css</a> - 一款非常小巧的提示框效果</p></li><li><a href="http://kazzkiq.github.io/balloon.css/" target="_blank" rel="noopener">Balloon.css</a>| |同上，一款非常小巧的提示框效果</li><li><a href="http://ianlunn.github.io/Hover/" target="_blank" rel="noopener">Hover.css</a> - 很多鼠标 Hover 态的效果，可以给产品学习一下:)</li><li><a href="http://css-cursor.techstream.org/" target="_blank" rel="noopener">Cursor</a> - 记录各浏览器对Cursor的支持情况</li><li><a href="https://github.com/zmoazeni/csscss" target="_blank" rel="noopener">csscss</a> - 用于检查 CSS 代码冗余</li><li><a href="http://purecss.io/" target="_blank" rel="noopener">purecss</a> - 小巧的响应式 CSS 库，Yahoo!出品</li><li><a href="https://jonsuh.com/hamburgers/" target="_blank" rel="noopener">hamburgers</a> - 简单的动画库，让 Click(or Tap) 变得美妙</li><li><a href="http://www.cssmatic.com" target="_blank" rel="noopener">cssmatic</a> - 一个帮忙调试CSS效果的工具</li></ul><h3 id="浏览端-JS"><a href="#浏览端-JS" class="headerlink" title="浏览端 JS"></a><a href="#%E6%B5%8F%E8%A7%88%E7%AB%AF-js"><span aria-hidden="true" class="octicon octicon-link"></span></a>浏览端 JS</h3><ul><li><p><a href="https://github.com/requirejs/requirejs" target="_blank" rel="noopener">requirejs</a> - JS模块化是构建复杂项目的第一步 中文学习文档奉上：<a href="http://www.requirejs.cn/" target="_blank" rel="noopener">RequireJS 中文网</a></p></li><li><p><a href="http://echarts.baidu.com/index.html" target="_blank" rel="noopener">ECharts</a> - 好用，最关键的是支持的图表展示非常之多，强烈推荐</p></li><li><a href="http://www.swiper.com.cn" target="_blank" rel="noopener">Swiper</a> - 强大的 Slider 库 其实这类效果库非常多，但文档能那么专业的就很少鸟</li><li><p><a href="https://babeljs.io/" target="_blank" rel="noopener">babel</a> - <code>ES6</code> 用起来。这个插件可以让我们用新的 <strong>标准/提案</strong> 写 <code>JavaScript</code> 代码，然后再向下 <strong>转换编译</strong>，最终生成随处可用的 <code>JavaScript</code> 代码。中文文档奉上<a href="https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md" target="_blank" rel="noopener">《babel-handbook》</a></p></li><li><p><a href="http://alvarotrigo.com/fullPage/" target="_blank" rel="noopener">fullPage</a> - 非常好用的全屏滑动库，看 Demo 就明白</p></li><li><a href="http://photoswipe.com/" target="_blank" rel="noopener">PhotoSwipe</a> - 偶常用的 js 库 官网上有这么一句很关键、重要”no dependencies”</li><li><a href="http://cn.vuejs.org" target="_blank" rel="noopener">Vuejs</a> - 比较喜欢其作者… 所以劳资正在看源码学习学习</li><li><a href="http://lab.ejci.net/favico.js/" target="_blank" rel="noopener">favico.js</a> - 动态改变浏览器标签栏中的网站图标，非常好玩</li><li><a href="http://ant.design" target="_blank" rel="noopener">ant.design</a> - 蚂蚁金服搞的良心项目，文档美好的令人发指 样式优雅，强烈推荐内部系统尝试此库</li><li><a href="https://highlightjs.org/" target="_blank" rel="noopener">highlightjs</a> - 代码高亮库，支持非常多的语言</li><li><p><a href="http://www.daterangepicker.com" target="_blank" rel="noopener">daterangepicker</a> - 时间选择插件的不二选择，基于 <code>Bootstrap</code> 和 <a href="http://momentjs.com/" target="_blank" rel="noopener">Moment.js</a></p></li><li><p><a href="https://github.com/ksky521/nodePPT" target="_blank" rel="noopener">nodePPT</a> - 前同事三水的大作，好用必须得支持:) 用 Markdown 写 PPT，还可以 HTML 混排，上手飞快</p></li><li><a href="https://github.com/RubaXa/Sortable" target="_blank" rel="noopener">Sortable</a> - 拖拽神器，用了就知道</li><li><p><a href="https://github.com/CodeSeven/toastr" target="_blank" rel="noopener">toastr</a> - 信息提示的库，推荐的原因是卖相好、功能强大 <a href="http://codeseven.github.io/toastr/demo.html" target="_blank" rel="noopener">demo</a></p></li><li><p><a href="http://benpickles.github.io/peity/" target="_blank" rel="noopener">peity.js</a> - jQuery的图表插件，特别cute，感觉萌萌哒 将HTML转换成一个小的<code>&amp;lt;svg&amp;gt;</code>饼图、圆环图、折线图等等</p></li><li><a href="https://github.com/Ranks/emojify.js" target="_blank" rel="noopener">emojify.js</a> - 能够将<code>emoji</code>关键词转换为<code>emoji</code>图片的<code>JS</code>插件 可以快速的为你的网站提供<code>emoji</code>表情支持</li><li><a href="http://www.hcharts.cn/" target="_blank" rel="noopener">Highcharts</a>| |Highcharts 中文网，又是一个图表库 确实功能强大，但是觉得不好看… PS：官网就做的不好看，脏脏的赶脚</li><li><a href="https://github.com/rstacruz/nprogress/" target="_blank" rel="noopener">NProgress</a> - 使页面加载时有更好的loading效果</li><li><a href="https://github.com/jaredreich/notie.js" target="_blank" rel="noopener">Noticejs</a> - 一个简单的通知库，木有依赖</li><li><a href="https://github.com/peachananr/onepage-scroll" target="_blank" rel="noopener">onepage-scroll</a> - 依赖 jQuery 的单页滚动库，和 <a href="http://alvarotrigo.com/fullPage/" target="_blank" rel="noopener">fullPage</a> 类似</li><li><a href="http://videojs.com/" target="_blank" rel="noopener">videojs</a> - 当下视频需求都用上<code>&amp;lt;video&amp;gt;</code>鸟 样式和交互统一的问题交给 videojs 搞定:)</li><li><a href="http://zenorocha.github.io/clipboard.js/" target="_blank" rel="noopener">clipboard</a> - 仅 2KB 大小，搞定剪贴板功能，屌不屌~ 但是，Safari 不支持…</li><li><p><a href="https://github.com/impress/impress.js" target="_blank" rel="noopener">impress.js</a> - 用来写 PPT 不错，偶也曾为其写过一篇<a href="http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html" target="_blank" rel="noopener">impress.js 初体验</a></p></li><li><p><a href="http://fengyuanchen.github.io/cropper/" target="_blank" rel="noopener">Cropper</a> - 国人开发的图片裁剪库</p></li></ul><blockquote><p><strong><em><code>Swiper/PhotoSwipe/fullPage</code> 有这仨库，微信里常见的 H5 页完全不是问题哒</em></strong></p></blockquote><h3 id="Project-Build"><a href="#Project-Build" class="headerlink" title="Project Build"></a><a href="#project-build"><span aria-hidden="true" class="octicon octicon-link"></span></a>Project Build</h3><ul><li><p><a href="https://www.npmjs.com/package/pm2" target="_blank" rel="noopener">pm2</a> - 是一个带有负载均衡功能的 Node 应用的进程管理器； 是 <a href="https://www.npmjs.com/package/forever" target="_blank" rel="noopener">Forever</a> 的进阶库，想了解的可以看这篇文章<a href="http://se77en.cc/2013/06/27/goodbye-node-forever-hello-pm2-translation/" target="_blank" rel="noopener">《拥抱PM2》</a></p></li><li><p><a href="http://webpack.github.io/" target="_blank" rel="noopener">Webpack</a> - 项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。</p></li><li><a href="https://github.com/gulpjs/gulp/" target="_blank" rel="noopener">Gulp</a> - Gulp 是基于 Node 实现 Web 前端自动化开发的工具。 俺总结了篇<a href="http://www.fefork.com/gulp_1/" target="_blank" rel="noopener">《gulp使用小结》</a>，推荐您阅读:)</li><li><p><a href="http://bower.io/" target="_blank" rel="noopener">Bower</a> - 前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本…卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter 推荐篇 Bower 的中文文章：<a href="http://blog.fens.me/nodejs-bower-intro/" target="_blank" rel="noopener">《bower 解决 js 的依赖管理》</a></p></li><li><p><a href="http://gruntjs.com/" target="_blank" rel="noopener">Grunt</a> - 和 Gulp 类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇<a href="http://www.benben.cc/blog/?p=407" target="_blank" rel="noopener">《Gulp vs Grunt》</a> 英盲又想看文档，可以去<a href="http://www.gruntjs.net/" target="_blank" rel="noopener">Grunt 中文网</a></p></li><li><p><a href="http://fex-team.github.io/fis3/" target="_blank" rel="noopener">FIS</a> - 度厂出品的前端构建工具 文档清晰，功能强大，推荐了解和使用</p></li><li><a href="https://ci.gitlab.org/" target="_blank" rel="noopener">Gitlab CI</a> - 一套基于<a href="https://about.gitlab.com/" target="_blank" rel="noopener">Gitlab</a>的持续集成服务</li></ul><blockquote><p>Gulp + Webpack 的使用<strong>套路</strong>参考: <a href="https://github.com/demohi/learning-gulp" target="_blank" rel="noopener">learning-gulp</a></p><p>Gulp 资料收集：<a href="https://github.com/Platform-CUF/use-gulp" target="_blank" rel="noopener">use-gulp</a></p><p>推荐篇与 Webpack 相关的文章《<a href="http://boke.io/tan-tan-css-modules/" target="_blank" rel="noopener">CSS Modules</a>》</p><p>Webpack 用起来吼吼：<a href="https://github.com/petehunt/webpack-howto" target="_blank" rel="noopener">webpack-howto</a></p></blockquote><h3 id="Node-Package"><a href="#Node-Package" class="headerlink" title="Node Package"></a><a href="#node-package"><span aria-hidden="true" class="octicon octicon-link"></span></a>Node Package</h3><blockquote><p>作为一名大前端甚至是多端，<code>Node</code> 绝逼是必备的一块</p><p>有关 <code>Node</code> 的学习资料，请访问</p></blockquote><h5 id="这里介绍些有特色且前端有必要知道的包"><a href="#这里介绍些有特色且前端有必要知道的包" class="headerlink" title="这里介绍些有特色且前端有必要知道的包"></a><a href="#%E8%BF%99%E9%87%8C%E4%BB%8B%E7%BB%8D%E4%BA%9B%E6%9C%89%E7%89%B9%E8%89%B2%E4%B8%94%E5%89%8D%E7%AB%AF%E6%9C%89%E5%BF%85%E8%A6%81%E7%9F%A5%E9%81%93%E7%9A%84%E5%8C%85"><span aria-hidden="true" class="octicon octicon-link"></span></a>这里介绍些有特色且前端有必要知道的包</h5><ul><li><a href="https://www.npmjs.com/package/anywhere" target="_blank" rel="noopener">anywhere</a> - 随时随地将你的当前目录变成一个静态文件服务器的根目录</li><li><a href="https://www.npmjs.com/package/supervisor" target="_blank" rel="noopener">supervisor</a> - 监控 Node 代码，自动重启。 A supervisor program for running nodejs programs</li><li><a href="https://github.com/remy/nodemon" target="_blank" rel="noopener">nodemon</a> - 监控 Node 代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.</li><li><p><a href="https://www.npmjs.com/package/pm2" target="_blank" rel="noopener">pm2</a> - 是一个带有负载均衡功能的 Node 应用的进程管理器； 是 <a href="https://www.npmjs.com/package/forever" target="_blank" rel="noopener">Forever</a> 的进阶库，想了解的可以看这篇文章<a href="http://se77en.cc/2013/06/27/goodbye-node-forever-hello-pm2-translation/" target="_blank" rel="noopener">《拥抱PM2》</a></p></li><li><p><a href="https://www.npmjs.com/package/async" target="_blank" rel="noopener">async</a> - 一个流程控制工具包，提供直接而强大的异步功能</p></li><li><a href="https://www.npmjs.com/package/lodash" target="_blank" rel="noopener">lodash</a> - JS 工具库 <code>Underscore.js</code>的一个 fork 发展而来</li><li><a href="https://github.com/socketio/socket.io" target="_blank" rel="noopener">socket.io</a> - 预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用</li><li><p><a href="https://github.com/Automattic/mongoose" target="_blank" rel="noopener">Mongoose</a> - 让 NodeJS 更容易操作 Mongodb 数据库； 附上一篇<a href="https://cnodejs.org/topic/504b4924e2b84515770103dd" target="_blank" rel="noopener">Mongoose 学习参考文档</a></p></li><li><p><a href="http://npm.taobao.org/" target="_blank" rel="noopener">CNPM</a> - 淘宝 NPM 镜像，提供了 NPM 同步的服务 当然可不仅仅这样，利用 CNPM 可以打造<strong>企业/个人</strong>私有的 NPM 服务 推荐篇搭建私有NPM的文章：<a href="http://blog.fens.me/nodejs-cnpm-npm/" target="_blank" rel="noopener">《CNPM搭建私有的NPM服务》</a></p></li><li><p><a href="http://koajs.com/" target="_blank" rel="noopener">koa</a> - 玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高 通过 generator 避免繁琐的回调函数嵌套，强烈推崇 <a href="https://github.com/guo-yu/koa-guide" target="_blank" rel="noopener">官方的文章教程</a></p></li><li><p><a href="https://github.com/shipitjs/shipit" target="_blank" rel="noopener">Shipit</a> - 一个强大的自动化部署工具。 shipit 很多地方非常类似 gulp，他们的核心都是任务系统。</p></li><li><a href="https://www.npmjs.com/package/node-inspector" target="_blank" rel="noopener">node-inspector</a> - Node 调试工具，使用起来跟 Chrome 的 JS 调试器很相似</li><li><a href="https://www.npmjs.com/package/winston" target="_blank" rel="noopener">winston</a> - Node 服务最流行的日志库之一</li><li><a href="https://www.npmjs.com/package/co" target="_blank" rel="noopener">co</a> - 用 generator 写法让异步代码同步</li><li><a href="https://www.npmjs.com/package/thenify-all" target="_blank" rel="noopener">thenify-all</a> - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object</li><li><p><a href="http://phantomjs.org/" target="_blank" rel="noopener">PhantomJS</a> - 一般用来做抓取截图和无界面测试 也可以用来操作 DOM 和网络监测，很好玩的库 <a href="http://phantomjs.org/quick-start.html" target="_blank" rel="noopener">Quick Start</a></p></li><li><p><a href="https://www.npmjs.com/package/ava" target="_blank" rel="noopener">ava</a> - 偶是应TJ大神推荐而得之的 <code>ava</code> 未来的测试运行器</p></li><li><a href="https://github.com/mochajs/mocha" target="_blank" rel="noopener">Mocha</a> - Node 里最常用的测试框架； 它支持多种 Node 的 Assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在 browser 上跑 JS 代码测试。</li><li><a href="https://www.npmjs.com/package/koa-validate" target="_blank" rel="noopener">koa-validate</a> - <code>koa</code> 的校验库 可以非常方便的对 <code>queryString</code> 或 <code>postBody</code> 的信息进行验证</li><li><a href="https://www.npmjs.com/package/line-reader" target="_blank" rel="noopener">line-reader</a> - 基于<code>steam</code>的按行读文件，偶处理日志时用哒 要不实现一个按行读文件，又得 <code>steam</code>、 又得 <code>chunk</code>，还是比较麻烦的</li><li><a href="https://www.npmjs.com/package/everyauth" target="_blank" rel="noopener">everyauth</a>| |OAuth 的集成解决方案</li><li><a href="http://documentup.com/shelljs/shelljs" target="_blank" rel="noopener">shelljs</a> - 写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单</li><li><a href="https://www.npmjs.com/package/hashids" target="_blank" rel="noopener">hashids</a> - 看名称就懂，给 userid 加解密用的</li><li><a href="https://github.com/coopernurse/node-pool" target="_blank" rel="noopener">node-pool</a> - 让 <code>Node</code> 有连接池的概念</li><li><a href="https://www.npmjs.com/package/colors" target="_blank" rel="noopener">colors</a> - 花俏的小工具 让打印<code>console.log</code>时有更好的展示样式</li><li><a href="https://www.npmjs.com/package/n" target="_blank" rel="noopener">n</a> - 控制Node的版本，想升级一行代码搞定</li></ul><blockquote><p><code>supervisor</code> 和 <code>nodemon</code> 这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备</p><p>以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)</p></blockquote><h3 id="Node-Project"><a href="#Node-Project" class="headerlink" title="Node Project"></a><a href="#node-project"><span aria-hidden="true" class="octicon octicon-link"></span></a>Node Project</h3><p>_暂无_</p><h2 id="精选阅读"><a href="#精选阅读" class="headerlink" title="精选阅读"></a><a href="#%E7%B2%BE%E9%80%89%E9%98%85%E8%AF%BB"><span aria-hidden="true" class="octicon octicon-link"></span></a>精选阅读</h2><h3 id="前端技术"><a href="#前端技术" class="headerlink" title="前端技术"></a><a href="#%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端技术</h3><ul><li><a href="http://www.imooc.com/learn/590" target="_blank" rel="noopener">2015D2前端论坛</a> - Node方向非常值得看，有干货，相信东哥推荐哈</li><li><a href="http://zhibimo.com/read/Ashu/front-end-style-guide/index.html" target="_blank" rel="noopener">前端开发规范手册</a> - 此手册主要实现的目标：代码一致性和最佳实践</li><li><a href="https://github.com/thejameskyle/babel-handbook/blob/master/translations/zh-Hans/README.md" target="_blank" rel="noopener">《babel-handbook》</a> - 可以用新的规范(如 <code>ES6</code>)写代码，经过 <code>babel</code> 编译后生成没有兼容问题的代码</li><li><a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">ECMAScript 6入门</a> - 阮一峰大神所著，一本开源的JS教程 全面介绍 ECMAScript 6新引入的语法特性</li><li><a href="http://wiki.jikexueyuan.com/project/react-native/" target="_blank" rel="noopener">ReactNative 中文版</a> - 翻译自官方的中文文档</li><li><a href="https://fakefish.github.io/react-webpack-cookbook/index.html" target="_blank" rel="noopener">ReactWebpackCookBook</a> | |此书会引导读者是进入<code>React</code>和<code>Webpack</code>的世界。 俩都是非常前沿的技术，同时使用会更有趣。</li><li><a href="https://github.com/ele828/react-native-guide" target="_blank" rel="noopener">ReactNative 学习指南</a> - 新玩意层出不穷… 对于能持续学习的童鞋，这是个美好的时代</li><li><a href="http://www.css88.com/doc/codeguide/" target="_blank" rel="noopener">HTML/CSS 编码规范</a> - 编写灵活、稳定、高质量的<code>HTML</code>和<code>CSS</code>代码的规范</li><li><a href="http://gold.xitu.io/entry/56c29abfa34131005b8cb1f3" target="_blank" rel="noopener">移动前端入门</a> - 入门价值高，移动方向常见问题的较好总结</li><li><a href="https://github.com/nimojs/gulp-book" target="_blank" rel="noopener">GulpBook</a> - Gulp 是基于 Node 实现 Web 前端自动化开发的工具</li></ul><h3 id="Node-学习资料"><a href="#Node-学习资料" class="headerlink" title="Node 学习资料"></a><a href="#node-%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99"><span aria-hidden="true" class="octicon octicon-link"></span></a>Node 学习资料</h3><ul><li><p><a href="https://github.com/youyudehexie/node123" target="_blank" rel="noopener">Node.js 中文资料导航</a> - Node 的中文资料导航，<code>start1300+</code></p></li><li><p><a href="http://blog.fens.me/series-nodejs/" target="_blank" rel="noopener">从零开始 NodeJS 系列文章</a> - 基本上每一篇都看过，强烈推荐</p></li><li><a href="http://nqdeng.github.io/7-days-nodejs/" target="_blank" rel="noopener">Node.js 包教不包会</a> - 值得阅读，看完绝不用买书鸟</li><li><a href="https://github.com/alsotang/node-lessons" target="_blank" rel="noopener">七天学会 NodeJS</a> - 劳资还没看，不过看目录还不错:)</li><li><a href="https://github.com/dead-horse/node-style-guide" target="_blank" rel="noopener">Style Guide</a> - 这是一份关于如何写出一致且美观的 <code>Node</code> 代码的风格指南</li><li><a href="http://book.apebook.org/minghe/koa-action/index.html" target="_blank" rel="noopener">koa实战</a> - “<a href="https://github.com/minghe" target="_blank" rel="noopener">明河</a>出品”这四字已经说明一切。PS：正在连载中</li><li><a href="https://github.com/jabez128/stream-handbook" target="_blank" rel="noopener">stream-handbook</a> - 如果学习 NodeJS，那么流一定是需要掌握的概念</li></ul><h3 id="前端面试"><a href="#前端面试" class="headerlink" title="前端面试"></a><a href="#%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端面试</h3><ul><li><a href="http://dongfei.baijia.baidu.com/article/52449" target="_blank" rel="noopener">在 LinkedIn 做面试官的故事</a> - 非面试题，介绍 LinkedIn 的面试过程 文章有很多中肯的建议和想法，推荐阅读</li><li><a href="http://www.w3cplus.com/css/write-to-front-end-developer-interview.html" target="_blank" rel="noopener">大漠：写给前端面试者</a> - 这篇文章不涉及任何的面试题 大漠与大家聊聊面试者与被面者之间的感受…</li><li><p><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese" target="_blank" rel="noopener">前端面试题</a> - Git 上非常火的前端面试题，<code>start17k+</code></p></li><li><p><a href="https://github.com/paddingme/Front-end-Web-Development-Interview-Question" target="_blank" rel="noopener">前端面经</a> - 主要内容是些前端面试笔试题和面试套路，值得阅读</p></li></ul><h3 id="其他技术"><a href="#其他技术" class="headerlink" title="其他技术"></a><a href="#%E5%85%B6%E4%BB%96%E6%8A%80%E6%9C%AF"><span aria-hidden="true" class="octicon octicon-link"></span></a>其他技术</h3><ul><li><a href="https://github.com/StevenSLXie/Tutorials-for-Web-Developers/blob/master/MongoDB%20%E6%9E%81%E7%AE%80%E5%AE%9E%E8%B7%B5%E5%85%A5%E9%97%A8.md" target="_blank" rel="noopener">MongoDB 极简实践入门</a> - 入门推荐的套路，非常浅显易懂</li><li><a href="https://github.com/macdao/ocds-guide-to-setting-up-mac" target="_blank" rel="noopener">Mac 设置指南</a> - Mac 使用必看 尤其适合 偏执狂/强迫症 患者:)</li><li><a href="https://github.com/xirong/my-markdown" target="_blank" rel="noopener">Markdown 资料</a> - 简单看些语法入门，快速用起来</li></ul><h2 id="工具-软件"><a href="#工具-软件" class="headerlink" title="工具/软件"></a><a href="#%E5%B7%A5%E5%85%B7%E8%BD%AF%E4%BB%B6"><span aria-hidden="true" class="octicon octicon-link"></span></a>工具/软件</h2><h3 id="Web"><a href="#Web" class="headerlink" title="Web"></a><a href="#web"><span aria-hidden="true" class="octicon octicon-link"></span></a>Web</h3><ul><li><a href="http://caniuse.com/" target="_blank" rel="noopener">CanIuse</a> - <strong>前端必备</strong>；查看浏览器对各种新特性的兼容情况</li><li><a href="http://overapi.com/" target="_blank" rel="noopener">overapi</a> - 最全的开发人员在线速查手册</li><li><a href="http://naotu.baidu.com" target="_blank" rel="noopener">百度脑图</a> - 非常方便的思维导图工具</li><li><a href="https://www.processon.com/" target="_blank" rel="noopener">ProcessOn</a> - 和百度脑图的功能类似，脑图工具。</li><li><p><a href="http://vimawesome.com/" target="_blank" rel="noopener">VimAwesome</a> - Vim 插件集合，<strong>Vim 党必备</strong></p></li><li><p><a href="https://tower.im" target="_blank" rel="noopener">Tower</a> - 小而美的多人协同工具。 不光只有 Web 版，还有 iPhone、iPad、Android、微信版。</p></li><li><a href="https://slides.com/" target="_blank" rel="noopener">Slides</a> - 一个所见即所得的 WebPPT 编辑器，非常推荐</li><li><a href="http://www.faviconer.co/" target="_blank" rel="noopener">faviconer.co</a> - 一个所见即所得的icon生成器，很好用</li><li><a href="http://smallpdf.com/cn" target="_blank" rel="noopener">smallpdf</a> - 提供各种格式和 PDF 互相转换</li><li><a href="https://www.zybuluo.com/mdeditor" target="_blank" rel="noopener">Cmd Markdown</a> - 好用的 Web 版 Markdown 编辑器</li><li><a href="https://stackedit.io/editor" target="_blank" rel="noopener">StackEdit</a> - 又是一款 Web 版 Markdown 编辑器</li><li><a href="https://modao.cc/" target="_blank" rel="noopener">墨刀</a> - 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。</li><li><a href="http://www.htm2pdf.co.uk" target="_blank" rel="noopener">htm2pdf</a>| |HTML to PDF</li><li><a href="https://speakerdeck.com/p/featured" target="_blank" rel="noopener">Speaker Deck</a> - 在线的演讲稿展示平台</li><li><a href="http://runjs.cn/" target="_blank" rel="noopener">RunJS</a> - 在线编辑、展示、分享、交流你的 <code>JavaScript</code> 代码</li><li><a href="https://bootswatch.com/" target="_blank" rel="noopener">Bootswatch</a> - <code>Bootstrap</code> 的免费模板</li><li><a href="https://github.com/almasaeed2010/AdminLTE/" target="_blank" rel="noopener">AdminLTE</a> - 又是一个 <code>Bootstrap</code> 的免费管理后台</li></ul><h3 id="APP"><a href="#APP" class="headerlink" title="APP"></a><a href="#app"><span aria-hidden="true" class="octicon octicon-link"></span></a>APP</h3><blockquote><p>以下列表中的 APP 都是不区分系统平台的</p></blockquote><ul><li><a href="https://www.yinxiang.com/" target="_blank" rel="noopener">印象笔记</a> - 免费账号完全够用，跨平台跨终端的记录软件</li><li><a href="http://www.365rili.com/" target="_blank" rel="noopener">365日历</a> - 首先肯定比系统自带的日历强大，要不推荐个蛋蛋 俺一般用来搞目标管理，比如学习计划和工作计划 生活中会订阅演唱会、电影首映的信息</li><li><a href="http://www.duokan.com/" target="_blank" rel="noopener">多看阅读</a> - kindle 确实好，但是懒得随身带着 多看还算不错，书较多且偶尔有特价比较爽</li><li><a href="https://itunes.apple.com/cn/app/surge-web-developer-tool-proxy/id1040100637?mt=8&amp;v0=WWW-GCCN-ITSTOP100-PAIDAPPS&amp;l=&amp;ign-mpt=uo%3D4" target="_blank" rel="noopener">Surge</a> - 非免费 牛逼的网络开发与调试工具，前端必备</li><li><a href="https://github.com/coderyi/Monkey" target="_blank" rel="noopener">Monkey</a> - Monkey 是 iPhone 上一个 GitHub 第三方客户端。 展示 GitHub 上的开发者的排名，以及仓库的排名</li></ul><h3 id="Mac"><a href="#Mac" class="headerlink" title="Mac"></a><a href="#mac"><span aria-hidden="true" class="octicon octicon-link"></span></a>Mac</h3><blockquote><p>对于美好事务的追求无论何时都不算晚，前年公司给配了台 Mac 用做测试开发机，于是开始在 Mac 下办公。 <strong>Windows？</strong> 回不去鸟…</p></blockquote><ul><li><a href="http://brew.sh/" target="_blank" rel="noopener">Homebrew</a> - 没它程序猿没法好好干活… <code>Homebrew</code>使<code>OS X</code>更完美。 使用<code>gem</code>来安装<code>gems</code>、用<code>brew</code>来搞定那些依赖包</li><li><p><a href="http://www.iterm2.com/" target="_blank" rel="noopener">iTerm2</a> - Mac 终端功能少又不好看，iTerm2 可以解救你~ 推荐篇文章：<a href="http://swiftcafe.io/2015/07/25/iterm/?hmsr=toutiao.io&amp;utm_medium=toutiao.io&amp;utm_source=toutiao.io" target="_blank" rel="noopener">《让你的命令行丰富多彩》</a></p></li><li><p><a href="https://itunes.apple.com/cn/app/browseshot/id615916400" target="_blank" rel="noopener">BrowseShot</a> - 偶正在使用的网页截图工具，强烈推荐</p></li><li><a href="http://www.scootersoftware.com" target="_blank" rel="noopener">BeyondCompare</a> - 在Windows下就开始用了 比对文件和文件夹杠杠好使，Merge必备工具</li><li><a href="https://www.mediaatelier.com/CheatSheet/" target="_blank" rel="noopener">CheatSheet</a> - 能够显示当前程序的快捷键列表，默认的快捷键是长按 ⌘</li><li><a href="http://www.sequelpro.com" target="_blank" rel="noopener">Sequel Pro</a> - 免费好用的Mysql工具</li><li><a href="http://www.cockos.com/licecap/" target="_blank" rel="noopener">LICEcap</a> - 屏幕录制工具，支持导出 GIF 动画图片格式 轻量级、使用简单，录制过程中可以改变录屏范围</li><li><a href="http://manico.im/" target="_blank" rel="noopener">Manico</a> - 快捷启动和切换 APP 的工具，高效的第一步 AppStore 上收费，不过可以免费试用</li><li><a href="http://www.jetbrains.com/webstorm/" target="_blank" rel="noopener">WebStorm</a> - 功能超强的前端 IDE，不多介绍，谁用谁知道 PS：貌似俺插件装多了，用着卡卡的，风扇呼呼转…</li><li><p><a href="https://atom.io" target="_blank" rel="noopener">Atom</a> - 2015 年 7 月之前，在桌面环境下我最喜欢的编辑器是 Sublime。 但之后就是 Atom，俺也专门为它写了篇<strong><em><a href="https://github.com/nieweidong/learn-atom" target="_blank" rel="noopener">使用纪要</a></em></strong></p></li><li><p><a href="http://www.getmarkman.com/" target="_blank" rel="noopener">马克鳗</a> - MarkMan，非常强大好用的标注、测量工具。 日常工作免费版就完全可以满足，<strong>强烈推荐</strong></p></li><li><p><a href="https://www.wireshark.org/" target="_blank" rel="noopener">Wireshark</a> - 说实话，Mac 下木有 Fiddler 挺不习惯，不过在有更强大的替代品</p></li><li><a href="https://www.sourcetreeapp.com/" target="_blank" rel="noopener">SourceTree</a> - 一款好用的的 Git 客户端工具，重点是支持中文:)</li><li><a href="https://www.focusboosterapp.com/" target="_blank" rel="noopener">focus booster</a> - 因为比较在意时间管理，所以这软件是俺工作时间的必备之物</li><li><a href="http://25.io/mou/" target="_blank" rel="noopener">Mou</a> - 我曾使用过的 mk 编辑器。原本准备去掉这个推荐，但是我想让大家了解下这个有意思的事情：<a href="http://matrix.sspai.com/p/c7a3c9c0" target="_blank" rel="noopener">《一年了，那个闻名遐迩的 Mou 你还记得吗？》</a></li></ul><h3 id="Linux"><a href="#Linux" class="headerlink" title="Linux"></a><a href="#linux"><span aria-hidden="true" class="octicon octicon-link"></span></a>Linux</h3><ul><li><a href="http://ohmyz.sh/" target="_blank" rel="noopener">oh-my-zsh</a> - <strong><em>终端党</em></strong> 必用的好工具，强烈推荐</li><li><a href="http://www.cnblogs.com/iadanac/p/3859481.html" target="_blank" rel="noopener">tree</a> - linux 以树状图逐级列出目录的内容</li><li><a href="http://www.oneapm.com/" target="_blank" rel="noopener">oneapm</a> - 强大的运维工具，提供多种监控客户端； 有采集、分析、展示等一套功能； PS：我这用了服务器监控(免费哦)</li><li><a href="https://github.com/jkbrzt/httpie" target="_blank" rel="noopener">httpie</a> - 一个 CLI 中的 HTTP 客户端 用法简单、易读</li></ul><h3 id="Chrome-浏览器插件"><a href="#Chrome-浏览器插件" class="headerlink" title="Chrome 浏览器插件"></a><a href="#chrome-%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6"><span aria-hidden="true" class="octicon octicon-link"></span></a>Chrome 浏览器插件</h3><blockquote><p><code>Chrome</code> 应用商店必定是需要翻墙的哈。</p></blockquote><p>以下插件都是俺多年积累淘出来的，按照俺推荐的强度自上向下展示，且大多数插件就是偶工作和生活必备，希望能对大家有用。后续如有新发现好插件，偶也会及时更新哒</p><ul><li><a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop" target="_blank" rel="noopener">Postman</a> - <code>POST</code> 接口调试终结者，异常强大的接口调试工具，稍稍有一点学习成本，推荐之</li><li><a href="https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc" target="_blank" rel="noopener">JSONView</a> - 就是一个 <code>JSON</code> 的查看工具，可以很方便的展示数据，麻麻再也不用担心偶调试接口啦。PS：同类插件有不少，所以用的开心就行</li><li><a href="https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81qr%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/pflgjjogbmmcmfhfcnlohagkablhbpmg" target="_blank" rel="noopener">二维码生成器</a> - RT，不多说明了。PS：这FF早已经自带生成二维码工具了，<code>Chrome</code> 还得装插件才行，任性…</li><li><a href="https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka" target="_blank" rel="noopener">Eye Dropper</a> 前端必备的颜色提取神器，操作简单容易上手</li><li><a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn" target="_blank" rel="noopener">Page Ruler</a> 前端必备的尺子。计算页面元素间距、位置等信息的时候，你就知道它的好了，无脑上手，你值得拥有</li><li><a href="https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg" target="_blank" rel="noopener">FireShot</a> 可以截取整个网页、部分页面，然后支持导出为各种格式。俺微博上发的网页全景图都是靠这个插件截取的</li><li><a href="https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg" target="_blank" rel="noopener">Infinity</a> - 好不好用有点见仁见智了，但是我个人比较喜欢。使用后会让你的 <strong>新标签页</strong> 耳目一新，有漂亮的背景和各种常用的功能，比如地图、天气、<code>Gmail</code>、<code>Chrome</code>商店等等。当然，在这个插件的设置中还可以设置壁纸、动画效果等等</li><li><a href="https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca" target="_blank" rel="noopener">Momentum</a> 同样也是 <strong>新标签页</strong> 的插件，但是不管是视觉上(高清大图)还是功能上，都比 <a href="https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg" target="_blank" rel="noopener">Infinity</a> 高大上不少，<code>Setting</code> 里面有不少设置和快捷键，都很好上手的。<a href="https://chrome.google.com/webstore/detail/infinity-new-tab/dbfmnekepjoapopniengjbcpnbljalfg" target="_blank" rel="noopener">Infinity</a>胜在中文和直观，<a href="https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca" target="_blank" rel="noopener">Momentum</a>胜在视觉冲击。俺基本上这俩款看心情换着用，所以希望你也都能喜欢:)</li><li><a href="https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc" target="_blank" rel="noopener">Octotree</a> - 在浏览器左侧展示 <code>Github</code> 项目的文件导航，使目录结构一目了然，而且我们国内 <code>Git</code> 的访问速度又不稳定，用这个工具也就很提效率了。对经常使用 <code>Github</code> 的同学强烈推荐</li><li><a href="https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn" target="_blank" rel="noopener">BuiltWith</a> / <a href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg" target="_blank" rel="noopener">wappalyzer</a> / |<a href="https://chrome.google.com/webstore/detail/chrome-sniffer-plus/fhhdlnnepfjhlhilgmeepgkhjmhhhjkh" target="_blank" rel="noopener">Chrome Sniffer Plus</a> - 几款超强的网站分析工具，可以给出网站非常多的技术栈信息。大到 <code>Web Servers</code>、服务端的 <code>Frameworks</code> 或 <code>JS</code> 框架，小到 <code>meta</code>、编码格式甚至 <code>Analytics</code>，非常推荐</li><li><a href="https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb/related" target="_blank" rel="noopener">Adblock Plus</a> 非常非常有名的免费的过滤广告的插件。PS：广告屏蔽这个见仁见智，其实俺个人还是比较接受一些个性化推荐的广告</li><li><a href="https://chrome.google.com/webstore/detail/porter-plug/lngoojfoglemfpbeiomhgheccpdheilp" target="_blank" rel="noopener">GitPlug</a> - 在 <code>Git</code> 项目页中嵌入有关的图表信息，直观的展示当前项目的 <code>Star Trend</code>，能方便看到当前这个开源项目的发起时间，火爆趋势；对比较知名的项目还有相关的 <code>News</code> 展示</li></ul><p>补充：</p><ol><li>翻墙代理的插件偶没使用，偶手机和电脑的翻墙都是配的 <code>Surge</code> 无脑搞定，不过翻墙代理插件推荐<a href="https://chrome.google.com/webstore/detail/proxy-switchysharp/dpplabbmogkhghncfbfdeeokoefdjegm" target="_blank" rel="noopener">Proxy SwitchySharp</a>，熊掌公司里大多用的都是它</li><li>日常开发相关的插件就以上这些，还有几款如知乎的插件、购物插件等这类与开发效率不沾边的，俺就不这上头列了哈</li></ol><h3 id="Git"><a href="#Git" class="headerlink" title="Git"></a><a href="#git"><span aria-hidden="true" class="octicon octicon-link"></span></a>Git</h3><ul><li><a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">Git 教程-廖雪峰</a> - 俺有看过不少 Git 的文章，确实这个系列是最通俗易懂的</li><li><a href="http://github-awards.com/" target="_blank" rel="noopener">GitAwards</a> - Git 工具，可以查看 Git 排名</li><li><a href="https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md" target="_blank" rel="noopener">Git 速查</a> - 分类清晰的速查表</li><li><a href="http://rogerdudler.github.io/git-guide/index.zh.html" target="_blank" rel="noopener">Git 简明指南</a> - 入门<code>Git</code>的简明指南，木有高深内容:)</li><li><p><a href="https://github.com/xirong/my-git" target="_blank" rel="noopener">Git 学习资料整理</a>| |内容包括很多 Git 的相关资料，<code>star 1200+</code></p></li><li><p><a href="https://github.com/phodal/github-roam" target="_blank" rel="noopener">GitHub 漫游指南</a> - 一篇还算不错的 Git 学习总结，就是乱了点… 我理解作者<strong>_漫游_</strong>的意思是漫无目的想到哪写到哪~ 看到作者为鸟达成 Git 连击的成就，也是蛮拼的:)</p></li></ul><h3 id="数据端"><a href="#数据端" class="headerlink" title="数据端"></a><a href="#%E6%95%B0%E6%8D%AE%E7%AB%AF"><span aria-hidden="true" class="octicon octicon-link"></span></a>数据端</h3><ul><li><a href="https://github.com/Automattic/mongoose" target="_blank" rel="noopener">Mongoose</a> - 让 NodeJS 更容易操作 Mongodb 数据库。 附上一篇<a href="https://cnodejs.org/topic/504b4924e2b84515770103dd" target="_blank" rel="noopener">Mongoose 学习参考文档</a></li></ul><h3 id="设计-交互"><a href="#设计-交互" class="headerlink" title="设计/交互"></a><a href="#%E8%AE%BE%E8%AE%A1%E4%BA%A4%E4%BA%92"><span aria-hidden="true" class="octicon octicon-link"></span></a>设计/交互</h3><blockquote><p>作为负责最终效果呈现的前端工程师，多少得了解些 <strong>设计和交互</strong> 的，这也是为什么 fetool 会单独的存在这一章…当然话又说回来了，偶毕业的第一份工作是设计:)</p></blockquote><ul><li><a href="http://www.zcool.com.cn/works/" target="_blank" rel="noopener">站酷</a> - 里面好东西太多，俺当年真没少再上面淘素材</li><li><a href="http://www.ui.cn/list.html" target="_blank" rel="noopener">UI中国</a> - 光听名字就知道有多高大上鸟:)</li></ul><h3 id="速查手册"><a href="#速查手册" class="headerlink" title="速查手册"></a><a href="#%E9%80%9F%E6%9F%A5%E6%89%8B%E5%86%8C"><span aria-hidden="true" class="octicon octicon-link"></span></a>速查手册</h3><blockquote><p>RT，这篇都是些文档或者API，一般这类东西都在大家浏览器的书签内，偶这也列一下大前端常用的手册地址</p></blockquote><ul><li><a href="https://github.com/joshbuchea/HEAD" target="_blank" rel="noopener">HEAD</a> - 最全的 <code>&amp;lt;head&amp;gt;</code> 列表，真心佩服这种偏执的整理能力</li><li><a href="http://cdn.code.baidu.com/" target="_blank" rel="noopener">百度CDN公共库</a> - 基本常见的库都收录拉，搞 demo 的时候特方便</li><li><a href="http://codeguide.bootcss.com/" target="_blank" rel="noopener">HTML 和 CSS 代码规范</a> - 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范</li><li><a href="http://linux.51yip.com" target="_blank" rel="noopener">Linux命令中文手册</a> - 木有系统的好好学习 Linux，所以命令更不熟悉 真羡慕那些CLI玩的飞起的:)</li><li><a href="https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md" target="_blank" rel="noopener">Git 速查</a> - 分类清晰的速查表</li><li><a href="http://jquery.cuishifeng.cn/" target="_blank" rel="noopener">jQueryAPI 1.11.3</a> - ZeptoAPI 基本和 jQuery 一样，所以看一份就好</li><li><a href="http://www.php100.com/manual/css3_0/index.html" target="_blank" rel="noopener">CSS3</a> - CSS3 的在线手册</li><li><a href="http://www.expressjs.com.cn/4x/api.html" target="_blank" rel="noopener">Express API</a> - 中文手册:) 4.x和3.x都有</li><li><a href="http://codeigniter.org.cn/user_guide/index.html" target="_blank" rel="noopener">CI用户指南</a> - 一个轻量级的 PHP 框架用户指南 推荐指数低的原因是劳资PHP比较弱，囧</li><li><a href="http://www.laruence.com/manual/" target="_blank" rel="noopener">Yaf</a> - 鸟哥(惠新宸)所写的 PHP 框架 推荐指数低的原因同上…</li></ul><p>###<br><a href="#%E6%9D%82%E4%B8%83%E6%9D%82%E5%85%AB"><span aria-hidden="true" class="octicon octicon-link"></span></a>杂七杂八</p><blockquote><p>放些开发中较有用的杂物在这儿</p></blockquote><ul><li><a href="https://github.com/soulteary/tenant-point" target="_blank" rel="noopener">租房要点</a> - 适用于北上广深杭，大城市打拼<strong>租房</strong>确实是硬伤</li><li><a href="https://github.com/jsfront/src/blob/master/qq.md" target="_blank" rel="noopener">QQ 群规</a> - 突然某天，有个 QQ 群让我加群 原本我是拒绝的，但当我看完这篇 QQ 群规后… 劳资真的被感动到了，太牛逼、够专业！ 最后，我默默加群鸟:)</li><li><a href="https://github.com/github/gitignore" target="_blank" rel="noopener">.gitignore 文件</a> - 介绍不同语言项目的 gitignore 模板</li><li><a href="https://github.com/easychen/howto-make-more-money" target="_blank" rel="noopener">程序员如何优雅的挣零花钱？</a> - 中肯的文章，如果读完能有些许收获，那么恭喜你</li><li><a href="https://github.com/ben174/git-draw" target="_blank" rel="noopener">git-draw</a> - 黑魔法，可以修改自己 Git 上的 Contributions</li><li><a href="https://www.gitbook.com" target="_blank" rel="noopener">GitBook</a> - 写记录的好地方</li><li><a href="https://codebabes.com/" target="_blank" rel="noopener">Codebabes</a> - 学编程的网站。 重点是每通过一个测试，尼玛对应的妞会脱一件衣服… PS：要翻墙哦~</li><li><a href="http://emailframe.work/" target="_blank" rel="noopener">emailframe</a> - 邮件展示确实比较坑，建议有需要的收藏</li><li><a href="https://github.com/nieweidong/ReadmeSample" target="_blank" rel="noopener">ReadmeSample</a>| |项目高大上的第一步就是<strong>包装</strong>，所以来看看 <code>README</code> 的书写套路吧 PS：劳资怎么这么无聊…</li></ul><h3 id="前端炫技-炫酷狂拽叼炸天站点"><a href="#前端炫技-炫酷狂拽叼炸天站点" class="headerlink" title="前端炫技-炫酷狂拽叼炸天站点"></a><a href="#%E5%89%8D%E7%AB%AF%E7%82%AB%E6%8A%80-_%E7%82%AB%E9%85%B7%E7%8B%82%E6%8B%BD%E5%8F%BC%E7%82%B8%E5%A4%A9%E7%AB%99%E7%82%B9_"><span aria-hidden="true" class="octicon octicon-link"></span></a>前端炫技-<em>炫酷狂拽叼炸天站点</em></h3><ul><li><a href="http://www.windows93.net/" target="_blank" rel="noopener">windows93</a> - 模拟 Win93 桌面，思路、体验和整体效果比较有意思</li><li><a href="http://geektyper.com/" target="_blank" rel="noopener">GeekTyper</a> - 好玩又具有 Geek 精神的网站，虽然创建的目的是个恶作剧 PS：网站需要翻墙</li><li><a href="http://2016.makemepulse.com/" target="_blank" rel="noopener">2016.makemepulse.com</a> - 帅哭了。请使用现代浏览器打开</li><li><a href="http://skill.phodal.com/" target="_blank" rel="noopener">前端技能栈</a> - 好玩的前端技能栈展示</li><li><a href="https://www.mapbox.com/" target="_blank" rel="noopener">Mapbox</a> - 非常叼的开源项目，有方便的 JSAPI(还有 SDK)。 不过免费版只能浅尝，流量有限。 PS：网站需要翻墙</li><li><a href="http://www.clarkduvall.com/" target="_blank" rel="noopener">Clark Duvall</a> - 一枚歪果仁的个人 blog，范儿叼叼的</li><li><a href="http://johnpolacek.github.io/superscrollorama/" target="_blank" rel="noopener">SuperScrollorama</a> - 好玩好看的动画库，链接是 SuperScrollorama 的展示页</li><li><a href="http://matthew.wagerfield.com/parallax/" target="_blank" rel="noopener">parallax.js</a> - 一个视差引擎的官网，在电脑和手机上都有很好的体验</li><li><a href="http://yusugomori.com/projects/css-sans/fonts" target="_blank" rel="noopener">CSS字母</a> - 用 CSS 实现英文字母，叼叼的</li><li><a href="https://modao.cc/" target="_blank" rel="noopener">墨刀</a> - 一个在线移动应用原型制作工具。 旨在帮助产品经理快速制作可在手机端展示的移动应用原型。</li></ul><h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a><a href="#%E5%B0%8F%E7%BB%93"><span aria-hidden="true" class="octicon octicon-link"></span></a>小结</h3><h5 id="背景"><a href="#背景" class="headerlink" title="背景"></a><a href="#%E8%83%8C%E6%99%AF"><span aria-hidden="true" class="octicon octicon-link"></span></a>背景</h5><p>俺算个比较能自我总结的码农，所以偶尔喜欢写点东西做些记录或者自我熏陶陶醉一下。<br>可写着写着发现<code>Evernote</code>里面的东西太尼玛多(乱)了，于是想着把一些技术相关的资料都整理整理，都丢到<code>Git</code>上沉淀下来。 这样Evernote就可以只需要记录些偏生活方便的，看着清爽一些…</p><p>所以，这篇记录其实只是为偶自己而写，确信以后也一直会这样~~~</p><h5 id="说说目标"><a href="#说说目标" class="headerlink" title="说说目标"></a><a href="#%E8%AF%B4%E8%AF%B4%E7%9B%AE%E6%A0%87"><span aria-hidden="true" class="octicon octicon-link"></span></a>说说目标</h5><p>其实与这篇记录类似的文章太多鸟，俺也不愿意成为一个单纯的收集资料，分享资料的这么个东西。<br>我希望 fetool 能更生动、更个性，最好能更另类点，对于每样工具的思考和解析更多点，吐槽也必须有理有据，然后再配上劳资收集的 low 图，完美！<br><strong>希望通过不停的完善这篇记录，能Push劳资多了解业内的新玩具和新创意，然后围绕这些新东西，客观的再写点好东西，比如文章、资料、开源项目这些，让其他伙伴们少走弯路或学的更顺畅点儿</strong></p><blockquote><p>所以劳资对自己的要求是：这篇记录里列出的每样东西，自己都得的去了解、去尝试，然后再列出来。 能举一反三最好，如果达不到至少也能清楚的认识：列出来的这玩意对程序员有没有卵用，解决了啥痛点。</p></blockquote><h3 id="TODO"><a href="#TODO" class="headerlink" title="TODO"></a><a href="#todo"><span aria-hidden="true" class="octicon octicon-link"></span></a>TODO</h3><ol><li><p>继续完善和扩充内容</p></li><li><p>“备注/说明”这一栏不够犀利，希望再多加入自己的理解、点评、吐槽，让这篇记录更犀利和生动</p></li><li><p>支持导出多种格式，如<code>.pdf</code>、<code>.epub</code>、<code>.mobi</code>等</p></li><li><p>后续看看如果有必要，可以单独搞个页面，优化下阅读和展示效果</p></li></ol><h1 id="【转载】-原文地址：http-www-fefork-com-fetool"><a href="#【转载】-原文地址：http-www-fefork-com-fetool" class="headerlink" title="【转载】 原文地址：http://www.fefork.com/fetool/"></a>【转载】 原文地址：<a href="http://www.fefork.com/fetool/" target="_blank" rel="noopener">http://www.fefork.com/fetool/</a></h1></div><div class="article-footer"><blockquote class="mt-2x"><ul class="post-copyright list-unstyled"><li class="post-copyright-link hidden-xs"><strong>本文链接：</strong> <a href="https://www.elonchung.cn/2017/06/front-tool/" title="大前端工具集——收藏" target="_blank" rel="external">https://www.elonchung.cn/2017/06/front-tool/</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！</li></ul></blockquote><div class="panel panel-default panel-badger"><div class="panel-body"><figure class="media"><div class="media-left"><a href="https://github.com/zhongweixiang?tab=repositories" target="_blank" class="img-burn thumb-sm visible-lg"><img src="/images/avatar.png" class="img-rounded w-full" alt=""></a></div><div class="media-body"><h3 class="media-heading"><a href="https://github.com/zhongweixiang?tab=repositories" target="_blank"><span class="text-dark">Elon Chung</span><small class="ml-1x">JAVA PHP Web Developer</small></a></h3><div>乐观自信爱生活；沉着冷静撸代码。</div></div></figure></div></div></div></article><section id="comments"></section></div><nav class="bar bar-footer clearfix" data-stick-bottom><div class="bar-inner"><ul class="pager pull-left"><li class="prev"><a href="/2017/06/phpstudy/" title="学习资源"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a></li><li class="next"><a href="/2017/03/jungui/" title="58到家数据库30条军规解读"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a></li><li class="toggle-toc"><a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="文章目录" role="button"><span>[&nbsp;</span><span>文章目录</span> <i class="text-collapsed icon icon-anchor"></i> <i class="text-in icon icon-close"></i> <span>]</span></a></li></ul><div class="bar-right"><div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div></div></div></nav></main><footer class="footer" itemscope itemtype="http://schema.org/WPFooter"><ul class="social-links"><li><a href="https://github.com/zhongweixiang?tab=repositories" target="_blank" title="Github" data-toggle="tooltip" data-placement="top"><i class="icon icon-github"></i></a></li><li><a href="https://weibo.com/331845158" target="_blank" title="Weibo" data-toggle="tooltip" data-placement="top"><i class="icon icon-weibo"></i></a></li></ul><div class="copyright">&copy; 2020 Elon Chung<div class="publishby">Theme by <a href="https://github.com/cofess" target="_blank">cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.</div>粤ICP备18050169号-1</div></footer><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script>window.jQuery||document.write('<script src="js/jquery.min.js"><\/script>')</script><script src="/js/plugin.min.js"></script><script src="/js/application.js"></script><script>!function(T){var N={TRANSLATION:{POSTS:"文章",PAGES:"页面",CATEGORIES:"分类",TAGS:"标签",UNTITLED:"(未命名)"},ROOT_URL:"/",CONTENT_URL:"/content.json"};T.INSIGHT_CONFIG=N}(window)</script><script src="/js/insight.js"></script><script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script><script>var gitment=new Gitment({id:"大前端工具集——收藏",owner:"zhongweixiang",repo:"zhongweixiang.github.io",oauth:{client_id:"0e7d3cfb086ee391e950",client_secret:"b4bb522dc433143cbc124889d04d684a2ca9e742"}});gitment.render("comments")</script><script defer>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="//hm.baidu.com/hm.js?bdd558368004a3dff28c0ad7c2b08e48";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script></body></html><!-- rebuild by neat -->